<template>
  <div v-if="abPermission != 'n'">
    <group>
      <x-address  v-if="abPermission!='r'"  :placeholder="placeholder" :placement="placement" :disabled="disabled"  :title="title"  v-model="data" :list="addressData" @on-shadow-change="onShadowChange" placeholder="请选择地址"  :show.sync="showAddress"></x-address>
      <cell  v-if="abPermission=='r'" :value="value"></cell>
    </group>

  </div>
</template>

<script>

    import {  XAddress, ChinaAddressV4Data,  Value2nameFilter as value2name,Name2valueFilter as name2value, Cell } from 'vux'

    export default {
        components: {
            XAddress,
            Cell
        },
        props: ['value','placeholder',"abPermission","placement","disabled"],
        data () {
            return {
                title: '',
                data: [],
                addressData: ChinaAddressV4Data,
                showAddress: false
            }
        },
        created: function () {
            if(this.value){
               this.name2value(this.value,this.addressData);
            }
        },
        methods: {
            name2value: function(str,addressData){
                let newData = (str || '').split("/");
                var newarr = newData.concat();
                if(newarr.length==4){newarr.pop();}
                this.data =  (name2value(newarr,addressData)||'').split(' ')
            },
            handleStyle : function(){
                if(!this.$vnode.context.$validity){
                    this.$vnode.context.$validity = {};
                }
                if(this.abPermission == "b"){
                    if(!this.value||this.value=="[]"){
                        this.$vnode.context.$validity[this.$attrs.desc] = "必填";
                        this.style = "border: 1px solid #ed4014;";
                    }else{
                        delete this.$vnode.context.$validity[this.$attrs.desc];
                        this.style = "";
                    }
                }// 动态权限后切换权限
                else if(this.$vnode.context.$validity[this.$attrs.desc]){
                    delete this.$vnode.context.$validity[this.$attrs.desc];
                    this.style = "";
                }
            },

            onShadowChange (ids, names) {
                console.log(ids, names)
            }
        },
        watch: {
            value: function () {
                if(!this.value){
                    this.data = [];
                    return;
                }
                this.handleStyle();
                this.name2value(this.value,this.addressData);

            },
            data: function () {
                if(!this.data || this.data.length==0){
                    this.$emit('input', '');
                    return ;
                }

                var aa = value2name(this.data,this.addressData,'/');
                this.$emit('input', aa)

            },
            abPermission:function(){
                this.handleStyle();
            }
        }
    }
</script>
